<script setup>
import { reactive, ref, watchEffect, computed } from "vue";
import { useCounterStore } from "@/stores";
import { useTabStore } from "@/stores";
import { useRouter } from "vue-router";
import aForm from "@/components/form/index.vue";
const router = useRouter();
const list = JSON.parse(localStorage.getItem("routes"));
const tabStore = useTabStore();
const navList = computed(() => {
  return list
    .filter((item) => item.meta.isNav)
    .sort((a, b) => a.meta?.index - b.meta?.index);
});
// const list = ref(['首页', '技术支持', '资源中心', '个人中心'])

let dropDown = ref(false);
const mouseIn = (e) => {
  e.stopPropagation();
  e.preventDefault();
  dropDown.value = true;
};
const mouseOut = () => {
  dropDown.value = false;
};

const handleTitle = (item, index) => {
  tabStore.primaryTabIndex = index;
  router.push(item.path);
};
const selcetClick = (item) => {
  router.push(item.path);
};

const counterStore = useCounterStore();
let headerBack = ref(false);
watchEffect(() => {
  headerBack.value = counterStore.count >= 100 ? true : false;
});

const openForm = ref(false);

const formData = reactive([
  {
    type: "login",
    title: "登录",
    data: [
      {
        id: 1,
        label: "",
        formType: "input",
        textType: "number",
        placeholder: "请输入手机号",
        rules: [
          {
            maxLength: 18,
            trigerOut: "长度超过了, 请重新输入",
          },
        ],
      },
      {
        id: 2,
        label: "",
        formType: "input",
        textType: "Verify",
        placeholder: "请输入验证码",
        rules: [
          {
            minLength: 6,
            trigerOut: "长度应大于等于6位, 请重新输入",
          },
        ],
      },
    ],
  },
  {
    type: "register",
    title: "注册",
    data: [
      {
        id: 3,
        label: "",
        formType: "input",
        textType: "number",
        placeholder: "请输入账号",
        rules: [
          {
            maxLength: 18,
            trigerOut: "长度超过了, 请重新输入",
          },
        ],
      },
      {
        id: 4,
        label: "",
        formType: "input",
        textType: "Verify",
        placeholder: "请输入验证码",
        rules: [
          {
            minLength: 6,
            trigerOut: "长度应大于等于6位, 请重新输入",
          },
        ],
      },
    ],
  },
]);

const chooseItem = ref("");

if (formData.length > 0) {
  chooseItem.value = formData[0].type;
}
</script>

<template>
  <div class="navbar">
    <div class="header" :class="{ headerBack: headerBack }">
      <div class="header_left">logo区</div>
      <div class="header_center" @mouseenter.stop="mouseIn($event)">
        <div
          class="header_center_item"
          v-for="(item, index) in navList"
          :key="item.path"
          v-show="item?.meta?.title"
        >
          <span
            @click="handleTitle(item, index)"
            :class="{
              actived: tabStore.primaryTabIndex === index,
            }"
            >{{ item.meta.title || item?.name }}</span
          >
          <div class="selcet selcetShow">
            <div>
              <div
                v-show="dropDown"
                class="selcet_text"
                v-for="route in item.children"
                :key="route.path"
                @click="selcetClick(route)"
              >
                {{ route.meta?.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header_right" @click="openForm = true">
        <div class="login">
          <span>登录/注册</span>
        </div>
        <!-- <div class="register">
        <span>立即注册</span>
      </div> -->
      </div>
      <teleport to="#app">
        <Modal
          v-model="openForm"
          :class="
            'showModal animate__animated animate__fadeIn' + openForm
              ? 'showFormStyle'
              : ''
          "
        >
          <template v-slot:title>
            <ul class="tabs">
              <li
                class="tabs-item"
                v-for="(item, index) in formData"
                :key="item.type"
                @click="chooseItem = item.type"
                :class="chooseItem == item.type ? 'active' : ''"
              >
                {{ item.title }}
              </li>
            </ul>
          </template>
          <template v-slot:cancel>
            <i class="iconfont icon-guanbi"></i>
          </template>
          <template v-slot:modal-contain>
            <a-form
              method="post"
              v-model:formData="formData"
              v-model:chooseItem="chooseItem"
              title="登录注册"
              title-type="tab"
            ></a-form>
          </template>
        </Modal>
      </teleport>
    </div>
    <div
      class="heder_select"
      @mouseleave="mouseOut()"
      :class="{ drop_down: dropDown }"
    ></div>
  </div>
</template>

<style lang="scss" scoped>
.navbar {
  width: 100%;
  background: black;
}
.header {
  color: white;
  font-size: 20px;
  transition: background 0.5s;
  background: #000;
  height: 70px;
  margin: auto;
  width: 100%;
  display: flex;

  span {
    cursor: pointer;
  }

  .header_left {
    width: 10%;
  }

  .header_center {
    width: 70%;
    display: flex;
    margin-left: 30px;

    .header_center_item {
      width: 14%;
      height: 70px;
      position: relative;
      font-size: 24px;
      .selcet {
        z-index: 999;
        color: white;
        width: 100%;
        top: 70px;
        position: absolute;
        display: none;

        .selcet_text {
          font-size: 16px;
          transition: 0.1s;
          margin-top: 10px;
          opacity: 0;
          &:hover {
            cursor: pointer;
          }
        }
      }

      .selcetShow {
        display: flex;
        justify-content: center;

        .selcet_text {
          opacity: 1;
        }

        // animation: change 0.3s forwards;
      }

      .actived {
        color: var(--themeGreen);
      }
    }

    .header_center_item span:hover {
      transition: all 0.3s;
      color: var(--themeGreen);
    }
  }

  .header_right {
    width: 20%;
    display: flex;

    .login {
      background-color: var(--themeGreen);
      margin: 10px auto;
      padding: 10px 20px;
      border-radius: 10px;

      // width: 50%;
      // color: var(--themeGreen);
      &:hover {
        background-color: rgb(23, 216, 219);
        transition: all 0.5s;
      }
    }

    .register {
      width: 50%;
    }
  }
}

.headerBack {
  background: black;
  color: white;
  // background: white;
  // color: black;
}

.heder_select {
  position: absolute;
  width: 100%;
  height: 0;
  background: black;
  // background: white;
  z-index: 998;
  transition: 0.2s;
  opacity: 0;
}

.drop_down {
  height: 180px;
  opacity: 1;
}

.login,
.register,
.header_center_item,
.header_left {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs {
  border-radius: 20px 20px 0 0;
  display: flex;
  width: 100%;
  background-color: var(--themeGreen);

  .tabs-item {
    padding: 20px 50px;
    background-color: transparent;
    border-radius: 20px 20px 0 0;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
  }

  .active {
    background-color: #fff;
    color: var(--themeGreen);
  }
}
</style>
